کانتکست ری‌اکت: یک راهنمای جامع

کانتکست ری‌اکت (React Context) یک ویژگی قدرتمند است که به شما امکان می‌دهد داده‌ها را بین کامپوننت‌ها به اشتراک بگذارید بدون اینکه نیاز باشد به صراحت props را از طریق هر سطح از درخت کامپوننت عبور دهید. این ویژگی راهی برای در دسترس قرار دادن مقادیر خاص برای تمام کامپوننت‌ها در یک زیردرخت مشخص فراهم می‌کند. این راهنما به بررسی زمان و نحوه استفاده مؤثر از کانتکست ری‌اکت، به همراه بهترین شیوه‌ها و اشتباهات رایج برای اجتناب از آن‌ها می‌پردازد.

درک مشکل: Prop Drilling

در اپلیکیشن‌های پیچیده ری‌اکت، ممکن است با مشکل "prop drilling" (حفاری پراپ) مواجه شوید. این اتفاق زمانی رخ می‌دهد که شما نیاز دارید داده‌ها را از یک کامپوننت والد به یک کامپوننت فرزند که در عمق زیادی قرار دارد، منتقل کنید. برای انجام این کار، شما باید داده‌ها را از طریق هر کامپوننت واسط عبور دهید، حتی اگر آن کامپوننت‌ها خودشان به آن داده‌ها نیازی نداشته باشند. این می‌تواند منجر به موارد زیر شود:

• شلوغی کد: کامپوننت‌های واسط با پراپ‌های غیرضروری پر می‌شوند.
• مشکلات نگهداری: تغییر یک پراپ نیازمند اصلاح چندین کامپوننت است.
• کاهش خوانایی: درک جریان داده‌ها در اپلیکیشن دشوارتر می‌شود.

این مثال ساده را در نظر بگیرید:

function App() {
  const user = { name: 'Alice', theme: 'dark' };
  return (
    <Layout user={user} />
  );
}

function Layout({ user }) {
  return (
    <Header user={user} />
  );
}

function Header({ user }) {
  return (
    <Navigation user={user} />
  );
}

function Navigation({ user }) {
  return (
    <Profile user={user} />
  );
}

function Profile({ user }) {
  return (
    <p>Welcome, {user.name}!
Theme: {user.theme}</p>
  );
}

در این مثال، شیء user از طریق چندین کامپوننت منتقل می‌شود، در حالی که فقط کامپوننت Profile واقعاً از آن استفاده می‌کند. این یک مورد کلاسیک از prop drilling است.

معرفی کانتکست ری‌اکت

کانتکست ری‌اکت راهی برای جلوگیری از prop drilling فراهم می‌کند، با این امکان که داده‌ها را بدون پاس دادن صریح از طریق props، در دسترس هر کامپوننتی در یک زیردرخت قرار دهد. این ویژگی شامل سه بخش اصلی است:

• Context: این محفظه‌ای برای داده‌هایی است که می‌خواهید به اشتراک بگذارید. شما یک کانتکست با استفاده از React.createContext() ایجاد می‌کنید.
• Provider: این کامپوننت داده‌ها را برای کانتکست فراهم می‌کند. هر کامپوننتی که توسط Provider پوشانده شود، می‌تواند به داده‌های کانتکست دسترسی داشته باشد. Provider یک پراپ value می‌پذیرد که همان داده‌هایی است که می‌خواهید به اشتراک بگذارید.
• Consumer: (قدیمی، کمتر رایج) این کامپوننت در کانتکست مشترک می‌شود. هر زمان که مقدار کانتکست تغییر کند، Consumer دوباره رندر می‌شود. Consumer از یک تابع render prop برای دسترسی به مقدار کانتکست استفاده می‌کند.
• هوک useContext: (رویکرد مدرن) این هوک به شما اجازه می‌دهد تا به مقدار کانتکست به طور مستقیم در یک کامپوننت تابعی دسترسی پیدا کنید.

چه زمانی از کانتکست ری‌اکت استفاده کنیم

کانتکست ری‌اکت به ویژه برای به اشتراک‌گذاری داده‌هایی مفید است که برای درختی از کامپوننت‌های ری‌اکت "سراسری" (global) در نظر گرفته می‌شوند. این موارد می‌تواند شامل موارد زیر باشد:

• تم (Theme): به اشتراک‌گذاری تم اپلیکیشن (مانند حالت روشن یا تاریک) در تمام کامپوننت‌ها. مثال: یک پلتفرم تجارت الکترونیک بین‌المللی ممکن است به کاربران اجازه دهد تا بین تم روشن و تاریک برای بهبود دسترسی و ترجیحات بصری جابجا شوند. کانتکست می‌تواند تم فعلی را مدیریت کرده و در اختیار تمام کامپوننت‌ها قرار دهد.
• احراز هویت کاربر: ارائه وضعیت احراز هویت کاربر فعلی و اطلاعات پروفایل او. مثال: یک وب‌سایت خبری جهانی می‌تواند از کانتکست برای مدیریت داده‌های کاربر وارد شده (نام کاربری، ترجیحات و غیره) و در دسترس قرار دادن آن در سراسر سایت استفاده کند تا محتوا و ویژگی‌های شخصی‌سازی شده را فعال کند.
• ترجیحات زبان: به اشتراک‌گذاری تنظیمات زبان فعلی برای بین‌المللی‌سازی (i18n). مثال: یک اپلیکیشن چندزبانه می‌تواند از کانتکست برای ذخیره زبان انتخاب شده فعلی استفاده کند. سپس کامپوننت‌ها برای نمایش محتوا به زبان صحیح به این کانتکست دسترسی پیدا می‌کنند.
• کلاینت API: در دسترس قرار دادن یک نمونه از کلاینت API برای کامپوننت‌هایی که نیاز به فراخوانی API دارند.
• فلگ‌های آزمایشی (Feature Toggles): فعال یا غیرفعال کردن ویژگی‌ها برای کاربران یا گروه‌های خاص. مثال: یک شرکت نرم‌افزاری بین‌المللی ممکن است ویژگی‌های جدید را ابتدا برای زیرمجموعه‌ای از کاربران در مناطق خاص عرضه کند تا عملکرد آن‌ها را آزمایش کند. کانتکست می‌تواند این فلگ‌های ویژگی را در اختیار کامپوننت‌های مناسب قرار دهد.

ملاحظات مهم:

• جایگزینی برای تمام مدیریت‌های وضعیت نیست: کانتکست جایگزینی برای یک کتابخانه کامل مدیریت وضعیت مانند Redux یا Zustand نیست. از کانتکست برای داده‌هایی استفاده کنید که واقعاً سراسری هستند و به ندرت تغییر می‌کنند. برای منطق وضعیت پیچیده و به‌روزرسانی‌های قابل پیش‌بینی وضعیت، یک راه‌حل مدیریت وضعیت اختصاصی اغلب مناسب‌تر است. مثال: اگر اپلیکیشن شما شامل مدیریت یک سبد خرید پیچیده با آیتم‌ها، تعداد و محاسبات متعدد است، یک کتابخانه مدیریت وضعیت ممکن است انتخاب بهتری نسبت به اتکای صرف به کانتکست باشد.
• رندرهای مجدد: هنگامی که مقدار کانتکست تغییر می‌کند، تمام کامپوننت‌هایی که از آن کانتکست استفاده می‌کنند، دوباره رندر می‌شوند. این می‌تواند بر عملکرد تأثیر بگذارد اگر کانتکست به طور مکرر به‌روز شود یا اگر کامپوننت‌های مصرف‌کننده پیچیده باشند. استفاده از کانتکست خود را برای به حداقل رساندن رندرهای مجدد غیرضروری بهینه کنید. مثال: در یک اپلیکیشن real-time که قیمت‌های سهام را که به سرعت به‌روز می‌شوند نمایش می‌دهد، رندر مجدد غیرضروری کامپوننت‌هایی که در کانتکست قیمت سهام مشترک هستند، می‌تواند بر عملکرد تأثیر منفی بگذارد. استفاده از تکنیک‌های memoization را برای جلوگیری از رندرهای مجدد زمانی که داده‌های مربوطه تغییر نکرده‌اند، در نظر بگیرید.

نحوه استفاده از کانتکست ری‌اکت: یک مثال عملی

بیایید به مثال prop drilling برگردیم و آن را با استفاده از کانتکست ری‌اکت حل کنیم.

۱. ایجاد یک کانتکست

ابتدا، یک کانتکست با استفاده از React.createContext() ایجاد کنید. این کانتکست داده‌های کاربر را نگهداری خواهد کرد.

// UserContext.js
import React from 'react';

const UserContext = React.createContext(null); // Default value can be null or an initial user object

export default UserContext;

۲. ایجاد یک Provider

سپس، ریشه اپلیکیشن خود (یا زیردرخت مربوطه) را با UserContext.Provider بپوشانید. شیء user را به عنوان پراپ value به Provider پاس دهید.

// App.js
import React from 'react';
import UserContext from './UserContext';
import Layout from './Layout';

function App() {
  const user = { name: 'Alice', theme: 'dark' };
  return (
    <UserContext.Provider value={user}>
      <Layout />
    </UserContext.Provider>
  );
}

export default App;

۳. مصرف کردن کانتکست

اکنون، کامپوننت Profile می‌تواند به داده‌های user مستقیماً از طریق کانتکست با استفاده از هوک useContext دسترسی پیدا کند. دیگر خبری از prop drilling نیست!

// Profile.js
import React, { useContext } from 'react';
import UserContext from './UserContext';

function Profile() {
  const user = useContext(UserContext);

  return (
    <p>Welcome, {user.name}!
Theme: {user.theme}</p>
  );
}

export default Profile;

کامپوننت‌های واسط (Layout، Header و Navigation) دیگر نیازی به دریافت پراپ user ندارند.

// Layout.js, Header.js, Navigation.js
import React from 'react';

function Layout({ children }) {
  return (
    <div>
      <Header />
      <main>{children}</main>
    </div>
  );
}

function Header() {
  return (<Navigation />);
}

function Navigation() {
  return (<Profile />);
}

export default Layout;

استفاده پیشرفته و بهترین شیوه‌ها

۱. ترکیب کانتکست با useReducer

برای مدیریت وضعیت پیچیده‌تر، می‌توانید کانتکست ری‌اکت را با هوک useReducer ترکیب کنید. این به شما امکان می‌دهد تا به‌روزرسانی‌های وضعیت را به روشی قابل پیش‌بینی‌تر و قابل نگهداری‌تر مدیریت کنید. کانتکست وضعیت را فراهم می‌کند و reducer انتقال‌های وضعیت را بر اساس actionهای ارسال شده مدیریت می‌کند.

// ThemeContext.js
import React, { createContext, useReducer } from 'react';

const ThemeContext = createContext();

const initialState = { theme: 'light' };

const themeReducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
};

function ThemeProvider({ children }) {
  const [state, dispatch] = useReducer(themeReducer, initialState);

  return (
    <ThemeContext.Provider value={{ ...state, dispatch }}>
      {children}
    </ThemeContext.Provider>
  );
}

export { ThemeContext, ThemeProvider };



// ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemeToggle() {
  const { theme, dispatch } = useContext(ThemeContext);

  return (
    <button onClick={() => dispatch({ type: 'TOGGLE_THEME' })}>
      Toggle Theme (Current: {theme})
    </button>
  );
}

export default ThemeToggle;



// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemeToggle from './ThemeToggle';

function App() {
  return (
    <ThemeProvider>
      <div>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

export default App;

۲. کانتکست‌های چندگانه

شما می‌توانید از چندین کانتکست در اپلیکیشن خود استفاده کنید اگر انواع مختلفی از داده‌های سراسری برای مدیریت دارید. این به جداسازی دغدغه‌ها و بهبود سازماندهی کد کمک می‌کند. به عنوان مثال، ممکن است یک UserContext برای احراز هویت کاربر و یک ThemeContext برای مدیریت تم اپلیکیشن داشته باشید.

۳. بهینه‌سازی عملکرد

همانطور که قبلاً ذکر شد، تغییرات کانتکست می‌تواند باعث رندرهای مجدد در کامپوننت‌های مصرف‌کننده شود. برای بهینه‌سازی عملکرد، موارد زیر را در نظر بگیرید:

• Memoization: از React.memo برای جلوگیری از رندر مجدد غیرضروری کامپوننت‌ها استفاده کنید.
• مقادیر کانتکست پایدار: اطمینان حاصل کنید که پراپ value که به Provider پاس داده می‌شود، یک مرجع پایدار است. اگر این مقدار در هر رندر یک شیء یا آرایه جدید باشد، باعث رندرهای مجدد غیرضروری خواهد شد.
• به‌روزرسانی‌های انتخابی: مقدار کانتکست را فقط زمانی به‌روز کنید که واقعاً نیاز به تغییر دارد.

۴. استفاده از هوک‌های سفارشی برای دسترسی به کانتکست

هوک‌های سفارشی ایجاد کنید تا منطق دسترسی و به‌روزرسانی مقادیر کانتکست را کپسوله کنید. این کار خوانایی و قابلیت نگهداری کد را بهبود می‌بخشد. برای مثال:

// useTheme.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

export default useTheme;



// MyComponent.js
import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, dispatch } = useTheme();

  return (
    <div>
      Current Theme: {theme}
      <button onClick={() => dispatch({ type: 'TOGGLE_THEME' })}>
        Toggle Theme
      </button>
    </div>
  );
}

export default MyComponent;

اشتباهات رایج که باید از آنها اجتناب کرد

• استفاده بیش از حد از کانتکست: از کانتکست برای همه چیز استفاده نکنید. این ابزار برای داده‌هایی که واقعاً سراسری هستند، بهترین کاربرد را دارد.
• به‌روزرسانی‌های پیچیده: از انجام محاسبات پیچیده یا side effectها به طور مستقیم در داخل provider کانتکست خودداری کنید. برای مدیریت این عملیات از یک reducer یا تکنیک مدیریت وضعیت دیگر استفاده کنید.
• نادیده گرفتن عملکرد: مراقب پیامدهای عملکردی هنگام استفاده از کانتکست باشید. کد خود را برای به حداقل رساندن رندرهای مجدد غیرضروری بهینه کنید.
• ارائه نکردن مقدار پیش‌فرض: اگرچه اختیاری است، اما ارائه یک مقدار پیش‌فرض به React.createContext() می‌تواند به جلوگیری از خطاها کمک کند، در صورتی که یک کامپوننت سعی کند کانتکست را خارج از یک Provider مصرف کند.

جایگزین‌های کانتکست ری‌اکت

در حالی که کانتکست ری‌اکت ابزار ارزشمندی است، همیشه بهترین راه‌حل نیست. این جایگزین‌ها را در نظر بگیرید:

• Prop Drilling (گاهی اوقات): برای موارد ساده‌ای که داده‌ها فقط توسط تعداد کمی از کامپوننت‌ها نیاز است، prop drilling ممکن است ساده‌تر و کارآمدتر از استفاده از کانتکست باشد.
• کتابخانه‌های مدیریت وضعیت (Redux, Zustand, MobX): برای اپلیکیشن‌های پیچیده با منطق وضعیت بغرنج، یک کتابخانه مدیریت وضعیت اختصاصی اغلب انتخاب بهتری است.
• ترکیب کامپوننت (Component Composition): از ترکیب کامپوننت برای انتقال داده‌ها به پایین درخت کامپوننت به روشی کنترل‌شده‌تر و صریح‌تر استفاده کنید.

نتیجه‌گیری

کانتکست ری‌اکت یک ویژگی قدرتمند برای به اشتراک‌گذاری داده‌ها بین کامپوننت‌ها بدون prop drilling است. درک زمان و نحوه استفاده مؤثر از آن برای ساخت اپلیکیشن‌های ری‌اکت قابل نگهداری و با عملکرد بالا بسیار مهم است. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما و اجتناب از اشتباهات رایج، می‌توانید از کانتکست ری‌اکت برای بهبود کد خود و ایجاد تجربه کاربری بهتر بهره‌مند شوید. به یاد داشته باشید که نیازهای خاص خود را ارزیابی کرده و قبل از تصمیم‌گیری برای استفاده از کانتکست، جایگزین‌ها را نیز در نظر بگیرید.